Tools for Creating a Custom UI
=First guide= A critical part of Role Playing Games or RPGs is the ability to use inventory, upgrade stat's, and view general Information about the character, and location that you are in. Today I will walk you through a basic beginning for a Menu. But first i would like to go over a few things. Vectors---- Vectors:Vectors (in a nut shell) are coordinates. There is always a "X" location and "Y" location when dealing with basic on screen Menus. To start Programming a vector you will need to setup a "New Vector Variable". You can do this by simply searching for the tile in the brain tile Selector. Remember to Name it something you will not confuse with Other Variables, as you will use alot of vectors even for a basic UI. Each X and Y coordinates range from -1 to 1. Programming Vectors: When your programming vectors you will need to program the "X" and "Y" coordinates. You can simply do this by using the following kodes. When:[] Do:VectorVariableX=Number When:[] Do:VectorVariableY=Number When assigning something to the variable position all you have to do is put the VectorVariable. As it retains both X and Y and example of this: when:[] Do:displaysqaureonscreetatVectorVariable Finding Vector Coordinates: An easy way to find Vector coordinates is to Put this line of code in the the character brain. when:[] Do:DisplayMousepositiontopleft When you hit "Test" You sell a set of numbers in the top left of the the screen The first set of numbers is the X cords, The second set is The Y cords. Basic Beginnings---- Today I will walk you through creating what i like to call "Pause Menu". I will try to break this down as simply as possible with explanations of the code when it is not self explanatory. I would start this process on a blank page probably on page 2 of the character (or page one if you are using a logic cube) Getting Started: On the first page insert the line: When:zpressed Do:page2 or whatever page your want to start your menu on. The second thing you need to do Is set the position you want the menu To appear. For this guides purpose I will use the Cords X=-0.025 an Y=-0.117. Remember to place The coordinates on the same page your are Assigning something to its position. I named my Variable "Menu". An Example of this is: When:[] Do:Menux=-0.025 When:[] Do:Menuy=-0.117 When:[] Do:DisplaysquareBlackonscreetatMenuWidth6height6 Now you may have noticed the square tile you can find that by opening up the props menu and hitting the Heart button. You can adjust The color, height, and width to your liking. Adding Text: Usually when you open a menu in a game what do you see? Resume, Map, Inventory, Player stats?? For this Guides purpose i will use Resume Player Stats and Inventory. I named my Vector Variables Accordingly as to not to confuse then. For the guides purpose I used the following vector coordinates: When:[] Do:Resumex=-0.0045 When:[] Do:Resumey=0.1004 When:[] Do:Inventoryx=-0.0045 When:[] Do:Inventoryy=-0.056 When:[] Do:PlayerStatsx=-0.0045 When:[] Do:PlayerStatsy=-0.2646 Now Since your variables are ready lets display text at there location The following is are examples: When: Do:DisplayText:ResumeonscreenatResume When: Do:DisplayText:InventoryOnscreenatInventory When: Do:DisplayText:PlayerStatsOnscreenatPlayerstat You'll notice that if you used the same coordinates as i did The menu Box looks to be off centered. I did that on purpose. This is to teach you how to do it. I dont want you to copy everything. It is easly Fixed by Changing the cords and/or resizing the square. Adding a cursor: Now Since you've got the begging of you menu setup lets make it Usable. To do this we will need to setup a line cursor. Create A new Number Variable and Name it something you can remember For this guides purpose i named it "line" now the next few Lines of code are showing you how to set this up: When:Pageentered Do:Line=1 When:line=1 Do:displaysquareonscreenatResume You will need to adjust the width and height of the square to your liking. Now lets set a action. The following line is a Child rule to the one above. Whem:EnterPressed Do:Switchpage1 This line states that when enter is pressed it will go back To page one. Thus exiting the menu. Now lets program the line cursor to move simply by using the following kodes: When:uparrowpressed Do:LineDrecremented1 When:downarrowpressed Do:lineincremented1 Now lets assign the line to the other selections: When:Line=2 Do:displaysquareonscreenInventory childrule When:enterpressed Do:switchpage3 When:Line=3 Do:displaysquareonscreenplyerstat childrule When:enterpressed Do:switchpage4 Again you will have to edit the height and width of the square to Make it look like it belongs. =Second guide= This is a basic guide on how you can create your own User Interface, or UI in short. For pretty much all UI, you are going to be making heavy use of the "display" tile. Display is the tile that allows you to show various things on the screen. Using Display Displaying objects Any basic (non-glued) object can be drawn directly onto the screen by using the display tile. Note that It is using the icon of the object, rather than the object itself, so changing the appearance of the object won't change the look of the drawn icon. For example: will show a picture of a light bulb in the center of the screen. You can also use the world picker to select the object you want to display, or use object variables. Also very useful for a UI is the extensive list of icons that are made available in the prop gallery. After the display tile, go into the prop gallery and go to the section with the heart symbol. Displaying text You can display text the same way you can display an object, by adding text after the display tile. Remember that you can also add numbers, vectors and additional text (using the "plus" tile in between the two text lines) to the end of any text you are working with. To add a line between text, do the following: To add text inside an icon, do the following: Displaying at common screen locations The display tile allows you to place text or pictures of objects at certain common screen locations in the Screen Location modifier tile. It contains options like top left, bottom left, center etc... This is useful when you don't have many UI elements on the screen. For all these common positions other than the exact center, when you try to draw multiple things in the same location, the game automatically shifts additional UI elements up or down so they don't overlap. To avoid stacking or stack towards a different direction, use the "stacking" modifiers after "display". Displaying at exact locations on the screen Sometimes, the common screen locations just won't cut it. At this point, you need to use the "on screen at" modifier. With this option you can specify exactly where on the screen to place a UI element. To use the "on screen at" modifier, you need to provide a vector to describe where on the screen to display. The x and y parts of the vector define the x and y co-ordinates that will be used, and I believe the z section is ignored, but I leave it at 0 just in case. The edges of the screen for both x and y axes are -1 and 1, with 0 being the center of the screen. The location you specify on screen is where the center of your object or text will be.It is worth noting that with this method, there is no additional shifting to help make UI elements visible, they appear exactly where you tell them to. Adjusting the width and height of your UI elements When displaying text you have several font size options, from small to extra large, but objects are a little more interesting. You have two ways to scale displayed objects: adjusting the scale with the scale modifier, or adjusting the width and height with the width and height modifiers. Adjusting the scale is the same as adjusting both the width and height by the same amount. This is useful when you want to preserve the aspect ratio, which is common for more complex pictures like characters or weapons. However, if you want more control you can specify different values for the width and height of your object which will cause it to stretch. This can work well for simpler pictures like squares and circles. Opacity The opacity modifier defines how see through the object you are showing on the screen is. 0 means it is completely see through, and 1 means it is completely opaque. This can be useful for overlaying one picture on top of another, or for giving a visual indicator of whether or not a particular ability is currently available to use. Color When showing text and icons on the screen (but not objects) you can specify a color. For text, this does exactly as you expect and colors the text whatever color you specify. Icons are colored already, so specifying a color will override the defaults. Some Additional Tips Useful Icons For UI *'Arrows' - Used to draw the user's attention to specific points on the screen. Color white also makes them easy to recolor. *'Button' - A circle with a black center that shows contrast well, but it can't be colored effectively. Recommended to be used with text inside it. *'Circle' - Similar to the button but white and a much smaller black outline. *'Diamond' - A square rotated 45 degrees. White with a black outline. *'Inputs' - There are icons for every input available. All controller buttons, keyboard keys and mouse buttons. Useful for showing how to control your game. *'Hands and feet' - "Hand" icons are suitable when suggesting an interaction (push, hold, grab), "feet" to suggest you will move to or kick something. *'Square '- Having resizable height and width, this will give you any shape rectangle you want with some tweaking. White in color. *'Timers '- Icon is a clock, which is good for representing time limits or timers. Showing User Focus If you can interact with your UI (ie. the user can select pieces of it) it is important that the user always understands what UI element currently has focus. One way to show focus on UI elements is to slightly enlarge the focused element by increasing its scale. The increase needs to be big enough to be visually distinctive. Another way is to use another element like arrows or the square to draw next to or behind the focused object. Display Meter Another very handy and commonly seen UI tool is the meter tile. This doesn't use the display tile, but allows much of the same functionality. Meters are often useful for anything that needs to track a maximum and current value separately. For example health, mana and experience points. There is a meter gallery for choosing a custom design for your meter. Find it by adding a modifier gallery after meter.